<template>
    <div>
        <mt-header :title="longTitle">
            <router-link to="/LegalPersonPhoto" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <process :color="color"></process>
        <ShowListInput :needData="LegalPersonName" :placeholder="LegalPersonNamePlaceholder" @inputChange="LegalPersonNameInputValue" :inputValue="LegalPersonNameData"></ShowListInput>
        <ShowListInput :needData="IDNumber" :placeholder="IDNumberPlaceholder" @inputChange="IDNumberInputValue" :inputValue="IDNumberData"></ShowListInput>
        <ShowList :entryData="expirationDate" @showList="showList"></ShowList>
        <ShowListInput :needData="PhoneNumber" :placeholder="phoneNumber" class="marT-10" @inputChange="PhoneNumberInputValue" :inputValue="phoneNumberData"></ShowListInput>
        <ShowListInput :needData="email" :placeholder="placeholderEmail" @inputChange="emailInputValue" :inputValue="emailData"></ShowListInput>

        <ShowList :entryData="occupation" @showList="showList" @inputChange="inputChange"></ShowList>
        <!--<div @click="goTo">-->
            <!--<MyButton :ButtonNext="ButtonNext"></MyButton>-->
        <!--</div>-->
        <com-button btnClass="next-btn"
                    @btn-click="goTo"
                    :disabled="nextBtnDisabled"
        >下一步</com-button>
        <!--弹出选择框-->
        <Popup :popupVisible="popupVisible" @change='change'>
            <picker @cancel="cancel" :ChooseName="ChooseName" :slotData="slotData" @companyName="companyName"></picker>
        </Popup>
    </div>
</template>

<script>
    import ShowListInput from '@/components/ShowListInput.vue'
    import ShowList from '@/components/ShowList.vue'
    import Popup from '@/components/Popup.vue'
    import picker from '@/components/picker.vue'
    import MyButton from '@/components/MyButton.vue'
    import process from '@/components/process.vue'
    import { mapState,mapMutations} from 'vuex'
    import {Header} from 'mint-ui';
    import { AUTHENTICATION_NEXT_BUTTON_CHECK,AUTHENTICATION_SELECT_CANCEL,
        AUTHENTICATION_SELECT_CHANGE,AUTHENTICATION_GET_INPUT_VALUE,GET_PHONE_NUMBER_VALUE,
        GET_LEGAL_PERSON_NAME_VALUE,GET_ID_NUMBER_VALUE,GET_EMAIL_VALUE,AUTHENTICATION_SHOW_SELECT_LIST} from '../store/types'
    import ComButton from '@/components/com-button.vue'
    import router from '@/router'
    import { Toast } from 'mint-ui';

    export default {
        name: "Authentication",
        components: {
            ShowListInput,
            ShowList,
            picker,
            Popup,
            MyButton,
            process,
            Header,
            ComButton
        },
        data() {
            return {
                ButtonNext: '下一步',
                color: {color: '#2dbbfd'},
                LegalPersonName: "法人姓名",
                IDNumber: '身份证号',
                PhoneNumber: "手机号",
                email:'法人邮箱',
                longTitle:'法人信息验证'
            }
        },
        computed:{

            ...mapState('Authentication',['popupVisible','ChooseName','OppName','phoneNumber',
                'LegalPersonNamePlaceholder','IDNumberPlaceholder','totalTime','expirationDate',
                'occupation','slotData',"phoneNumberData",'LegalPersonNameData','IDNumberData',
                'placeholderEmail','emailData','nextBtnDisabled']),
        },
        methods: {
            ...mapMutations('Authentication',[AUTHENTICATION_SHOW_SELECT_LIST, AUTHENTICATION_SELECT_CANCEL,
                GET_PHONE_NUMBER_VALUE,GET_LEGAL_PERSON_NAME_VALUE,GET_ID_NUMBER_VALUE,
                AUTHENTICATION_GET_INPUT_VALUE,
                AUTHENTICATION_SELECT_CHANGE,GET_EMAIL_VALUE,AUTHENTICATION_NEXT_BUTTON_CHECK]),
            showList: function (value) {
                this.AUTHENTICATION_SHOW_SELECT_LIST(value)
            },
            cancel() {
                this.AUTHENTICATION_SELECT_CANCEL()
            },
            change(){
                this.AUTHENTICATION_SELECT_CHANGE()
            },
            companyName: function (value) {
                if (this.OppName == "expirationDate") {
                    this.expirationDate[0].choose = value.join("-")
                    this.AUTHENTICATION_NEXT_BUTTON_CHECK()
                } else if (this.OppName == "occupation") {
                    this.occupation[0].choose = value.join("-")
                }
            },
            inputChange(value){
                this.AUTHENTICATION_GET_INPUT_VALUE(value)
            },
            PhoneNumberInputValue(value){
                this.GET_PHONE_NUMBER_VALUE(value)
                this.AUTHENTICATION_NEXT_BUTTON_CHECK()
            },
            emailInputValue(value){
                this.GET_EMAIL_VALUE(value)
                this.AUTHENTICATION_NEXT_BUTTON_CHECK()
            },
            LegalPersonNameInputValue(value){
                this.GET_LEGAL_PERSON_NAME_VALUE(value)
                this.AUTHENTICATION_NEXT_BUTTON_CHECK()
            },
           IDNumberInputValue(value){
                this.GET_ID_NUMBER_VALUE(value)
                this.AUTHENTICATION_NEXT_BUTTON_CHECK()
            },

            goTo(){
                // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                //判断手机号码
                // var r = /^[^\u4e00-\u9fa5]+$/;
                var r = /^[1][3,4,5,7,8,9][0-9]{9}$/;
                //判断email格式
                var myemail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
                if(!reg.test(this.IDNumberData))
                {
                    Toast("请输入正确身份证号码")
                    return false
                }else if
                (!r.test(this.phoneNumberData)){
                    Toast("请输入正确手机号码")
                    return false
                }
                else if
                (!myemail.test(this.emailData)){
                    Toast("请输入正确邮箱地址")
                    return false
                }else if
                (this.LegalPersonNameData==""||
                    this.IDNumberData==""||
                    this.expirationDate[0].choose==""||
                    this.phoneNumberData==""||
                    this.emailData==""
                    ){
                        Toast("请填入必填项")
                       return false
                    }
                    router.push( 'ShopPhoto' )
                }


        },

    }
</script>

<style scoped>
    .marT-10 {
        margin-top: 10px;
    }


    /*.showlist {*/
        /*position: relative;*/
        /*width: 100%;*/
        /*height: 3.125rem;*/
        /*line-height: 3.125rem;*/
        /*display: flex;*/
        /*background-color: #fff;*/
        /*!*margin-top: 6px;*!*/
        /*border-bottom: 1px solid #e0e3ea;*/
        /*font-size: 0.9rem;*/

    /*}*/

    /*.show-list-left {*/
        /*width: 5.5rem;*/
        /*text-align: left;*/
        /*padding-left: 10px;*/

    /*}*/

    /*.show-list-center {*/
        /*flex: 1;*/
        /*text-align: left;*/
        /*color: black;*/
        /*border: none;*/
        /*font-size: 0.9rem;*/
        /*outline: none;*/
        /*padding-left: 15px;*/
    /*}*/

    input::-webkit-input-placeholder {
        color: #e0e3ea;
    }


</style>